<!-- 项目进度 -->
<template>
  	<div class="main">
		<div class="head pt32 pb32">
			<div class="back-title ft14">
				<div class="back pr32">返回</div>
				<div class="fc-black">交投项目商务平台</div>
			</div>
			<div class="right-btns ft14 fc-black">
				<div class="pr32 pointer">设置</div>
				<div class="pr24 pointer">成员</div>
			</div>
		</div>
		<div class="content pr24 pb24">
			<div class="top pb8">
				<div class="flex-row">
					<div class="flex-col col-46">
						<div class="col">1</div>
					</div>
					<div class="flex-col col-25 pl16 pr16">
						<div class="col">2</div>
					</div>
					<div class="flex-col col-sy">
						<div class="col_div">
							<div class="pr8 pb8">
								<div class="col">1</div>
							</div>
							<div class="pl8 pb8">
								<div class="col">2</div>
							</div>
							<div class="pt8 pr8">
								<div class="col">3</div>
							</div>
							<div class="pl8 pt8">
								<div class="col">4</div>
							</div>
						</div>
					</div>
				</div>
				<!-- <el-row :gutter="20" class="row">
					<el-col :span="11">
						<div class="col">1</div>
					</el-col>
					<el-col :span="6">
						<div class="col">2</div>
					</el-col>
					<el-col :span="7">
						<div class="col">3</div>
					</el-col>
				</el-row> -->
			</div>
			<div class="bottom pt8">
				<div class="row">1</div>
				<div class="row">2</div>
				<div class="row">3</div>
			</div>
		</div>
  	</div>
</template>

<script>
export default {
	data () {
		return {
		};
	},
	components: {},

	computed: {},
	created(){},

	mounted(){},

	methods: {}
}

</script>
<style lang='scss' scoped>
	.main{
		height:100%;
		// overflow:hidden;
		display:flex;
		flex-direction:column;
		.head{
			display:flex;
			justify-content:space-between;
			align-items:center;
			.back-title{
				display:flex;
				align-items:center;
				.back{
					color: #96a2aa;
				}
			}
			.right-btns{
				display:flex;
				align-items:center;
			}
		}
		.content{
			flex:1;
			display:flex;
			flex-direction:column;
			.top{
				height:50%;
				.flex-row{
					height:100%;
					display:flex;
					.flex-col{
						>.col{
							height:100%;
							background-color: #ffffff;
							border-radius: 6px;
						}
					}
					.col-46{
						width:46%;
					}
					.col-25{
						width:25%;
					}
					.col-sy{
						flex:1;
						.col_div{
							height:100%;
							display:flex;
							flex-wrap:wrap;
							>div{
								width:50%;
								height:50%;
								>.col{
									height:100%;
									background-color: #ffffff;
									border-radius: 6px;
								}
							}
						}
					}
				}
				
			}
			.bottom{
				height:50%;
				display:flex;
				justify-content:space-between;
				align-items:center;
				.row{
					width:32%;
					height:100%;
					background-color: #ffffff;
					border-radius: 6px;
				}
			}
		}
	}
</style>